<template>
    <el-form v-if="fieldName &&!fieldName.startsWith('undefined')" ref="form" :model="form" :rules="formRule" v-infinite-scroll="load()" style="overflow: auto;height: 80%">
        <el-form-item label="属性名称" prop="fieldName" required>
            <el-input v-model="form.fieldName" placeholder="请输入属性名称"/>
            <el-input v-model="form.rowIndex" v-show="false"/>
            <el-input v-model="form.colIndex" v-show="false"/>
        </el-form-item>
        <el-form-item label="标签名称" prop="labelName" required>
            <el-input v-model="form.labelName" placeholder="请输入标签名称"/>
        </el-form-item>
        <el-form-item label="输入提示" prop="placeholder">
            <el-input v-model="form.placeholder" placeholder="请输入提示信息"/>
        </el-form-item>
        <el-form-item label="默认值" prop="defaultValue">
            <el-input v-model="form.defaultValue" placeholder="请输入默认值"/>
        </el-form-item>
        <el-form-item label="数据源" prop="dataSource">
            <el-select v-model="form.dataSource" placeholder="请选择数据源">
                <el-option label="静态数据Key/Value" value="1"/>
                <el-option label="静态数据Json字符串" value="2"/>
                <el-option label="动态数据" value="3"/>
            </el-select>
        </el-form-item>
        <el-form-item label="提交接口" prop="url">
            <el-select v-model="form.url" placeholder="请选择提交接口">
                <el-option label="用户编辑" value="1"/>
                <el-option label="巡检保存" value="2"/>
                <el-option label="订单编辑" value="3"/>
            </el-select>
        </el-form-item>
        <el-form-item label="是否必填" prop="isEmpty" required>
            <el-radio-group v-model="form.isEmpty">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="2">否</el-radio>
            </el-radio-group>
        </el-form-item>
    </el-form>
</template>

<script>
    import {warning} from "../../utils/message";

    export default {
        name: "ItemPropertiesPanel",
        props: {
            itemName:
                {
                    type: Object,
                    required: true
                }
        },
        data() {
            let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/
            return {
                // formRule:{
                //   fieldName:{
                //       required:true,
                //       message:"请输入英文属性名",
                //       pattern:reg,
                //       trigger:"blur",
                //   }
                // },
                dataList: {},
                fieldName: "",
                form: {isEmpty: 2}
            }
        },

        watch: {
            form: {
                handler: function (vd) {
                    let keyName = this.itemName["itemName"];
                    if (keyName && !keyName.startsWith("undefined")) {
                        this.dataList[keyName] = this.form;
                    }
                    this.updateFieldData();
                },
                deep: true
            },
            itemName(v) {
                let keyName = this.itemName["itemName"];
                this.fieldName = keyName;
                if (!keyName || keyName.startsWith("undefined")) {
                    warning("该节点未放表单元素");
                    return;
                }
                let fData = this.dataList[keyName];
                if (fData) {
                    this.form = fData;
                } else {
                    let rowIndex = this.itemName.rowIndex;
                    let colIndex = this.itemName.colIndex;
                    for (let index in this.dataList) {
                        let temp = this.dataList[index];
                        if (temp.rowIndex == rowIndex && temp.colIndex == colIndex) {
                            delete this.dataList[index];
                            break;
                        }
                    }
                    this.form = {
                        isEmpty: 2,
                        fieldName: "Field" + new Date().getTime(),
                        dataType: this.itemName.dataType,
                        rowIndex,
                        colIndex
                    };
                }
                this.dataList[keyName] = this.form;
            }
        },
        methods: {
            load() {

            },
            updateFieldData() {
                console.log(this.dataList);
                this.$emit("updateFieldData", this.dataList);
            }
        }
    }
</script>

<style scoped>

</style>